<template>
  <view class="my-search-container">
    <!-- uni-search-bar搜索框 -->
    <view class="search-box">
      <!-- radius="100"不给 :效果也是一样, 因为这里的是number 所以最好就 : 显得你的专业呀 -->
      <!-- cancelButton 点击后出现一个按钮.把他取消,不好看 -->
      <uni-search-bar
        :radius="100"
        cancelButton="none"
        @input="input"
        @clear="goodsList = []"
      ></uni-search-bar>
    </view>
    <!-- 搜索结果列表 -->
    <!-- 这里不做判断也一样可以, -->
    <view class="sugg-list" v-if="goodsList.length > 0">
      <view
        class="sugg-item"
        v-for="item in goodsList"
        :key="item.goods_id"
        :url="'/subpkg/detail/index.vue?goods_id=' + item.goods_id"
        @click="todetail(item.goods_id)"
      >
        <text class="goods-name">{{ item.goods_name }}</text>
      </view>
    </view>
    <!-- 搜索历史 -->
    <view v-else class="history-box">
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons @click="history = []" type="trash" size="18"></uni-icons>
      </view>
      <!-- 展示历史记录 -->
      <!--  :text="item" 标签内容 必须用:号  内容就是遍历出来的每一项 item -->
      <view class="history-list">
        <uni-tag
          :text="item"
          type="default"
          v-for="item in historyList"
          :key="item"
          @click="goToGoodsList(item)"
        ></uni-tag>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      timer: null,
      keyword: '',
      goodsList: [], // 商品列表
      historyList: [] // 搜索历史
    }
  },
  methods: {
    input (e) {
      // 节流节流,,比如说用户输入后,在规定一个时间去触发请求和执行代码,不会外界的干扰,非常有规律的,去触发请求或者执行代码
      console.log('e', e) // 防抖防抖,比如inout输入框,用户一直输入,它就一直触发,会让费性能(所以防抖要做的就是, 比如要用户输入完成后,在去触发执行代码)
      // 111,定义一个定时器
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        // 放在一个定时器里面,用户输入完成后,过0.5秒才执行代码
        this.getGoodsListData(e)
      }, 500)
    },
    // 222,发送请求 keyword是关键字的意思, 是上面的e传递过来的, e是获取到用户输入的文本
    async getGoodsListData (keyword) {
      if (keyword.trim().length === 0) return
      const res = await uni.$request({
        url: 'goods/qsearch',
        data: {
          query: keyword
        }
      })
      console.log('res', res)
      if (res.meta.status === 200) {
        this.goodsList = res.message
      }
      // 把关键字存储到history里面去(调用下面的saveHistory方法 )
      //  放在下面的目的就是,用户搜索完成后,在添加历史记录
      this.saveHistory(keyword)
    },
    // 保存history 搜索历史,的关键字
    saveHistory (keyword) {
      // findIndex(item=>item===keyword) 遍历里面的每一项.然后和keyword做对比
      const index = this.historyList.findIndex(item => item === keyword)
      // 大于-1 就是代表找到了,(实现的效果就是,如果用户输入两个次相同的关键字,那么新输入的会排在最前面,旧的关键字则被删除)
      if (index > -1) {
        this.historyList.splice(index, 1)
      }
      // 把关键字存储到historyList里面去,将关键字添加到最前面
      this.historyList.unshift(keyword)
      // 将 data 存储在本地,缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
      // 这里本地指定的是 this.history (存在本地后,当进入该页面的时候就取出来,到onLoad钩子函数里面调用一下这个方法)
      uni.setStorageSync('history', this.historyList)
    },
    // 当进入该页面的时候就取出来,取出存储在本地的关键字
    onLoad () {
      // 从本地缓存中同步获取指定 key 对应的内容。
      // 第一次进来就赋值一个空数组,
      this.historyList = uni.getStorageSync('history') || []
    },
    // 点击跳转到,商品详情,页面 ,带id过去
    todetail (goods_id) {
      console.log('goods_id', goods_id)
      uni.navigateTo({
        url: '/subpkg/detail/index?goods_id=' + goods_id
      })
    },
    // 点击跳转到,商品列表,页面
    // 因为那边的请求参数需要用到 query 所以这边就定义 query+item
    goToGoodsList (item) {
      uni.navigateTo({
        url: '/subpkg/goods-list/index?query=' + item
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.my-search-container {
  .search-box {
    background-color: #c00000;
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .sugg-list {
    padding: 0 5px;

    .sugg-item {
      font-size: 12px;
      padding: 13px 0;
      border-bottom: 1px solid #efefef;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .goods-name {
        // 文字不允许换行（单行文本）
        white-space: nowrap;
        // 溢出部分隐藏
        overflow: hidden;
        // 文本溢出后，使用 ... 代替
        text-overflow: ellipsis;
        margin-right: 3px;
      }
    }
  }
  .history-box {
    padding: 0 5px;

    .history-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      font-size: 13px;
      border-bottom: 1px solid #efefef;
    }

    .history-list {
      display: flex;
      flex-wrap: wrap;

      ::v-deep .uni-tag {
        margin-top: 5px;
        margin-right: 5px;
      }
    }
  }
}
</style>
